<template>
  <div class="editor-container" id="editorContainer"></div>
</template>

<script setup>
  import { onMounted, ref, watch } from 'vue'
  import { useRoute } from 'vue-router'
  const route = useRoute()
  const documentType = ref('')
  onMounted(() => {
    let fileType = route.query.fileType
    if (fileType === 'docx' || fileType === 'doc') {
      documentType.value = 'word'
    } else if (
      fileType === 'xlsx' ||
      fileType === 'xls' ||
      fileType === 'csv'
    ) {
      documentType.value = 'cell'
    } else if (fileType === 'pptx' || fileType === 'ppt') {
      documentType.value = 'slide'
    } else if (fileType === 'txt') {
      documentType.value = 'text'
    } else if (fileType === 'pdf') {
      documentType.value = 'pdf'
    }
    if (route.query.type === 'view') {
      funView()
    } else if (route.query.type === 'edit') {
      funEdit()
    }
  })
  const funView = () => {
    new window.DocsAPI.DocEditor('editorContainer', {
      document: {
        url: route.query.fileUrl, // 替换为实际文档路径
        title: route.query.title,
        fileType: route.query.fileType,
        key: route.query.fileId,
      },
      documentType: documentType.value,
      editorConfig: {
        mode: 'view',
        lang: 'zh',
        callbackUrl: `http://172.27.177.63/system/api/knowledgeBase/saveFile?fileId=${route.query.fileId}`, // 后端回调地址
      },
    })
  }
  const funEdit = () => {
    new window.DocsAPI.DocEditor('editorContainer', {
      document: {
        url: route.query.fileUrl, // 替换为实际文档路径
        title: route.query.title,
        fileType: route.query.fileType,
        key: route.query.fileId,
      },
      documentType: documentType.value,
      editorConfig: {
        mode: 'edit',
        lang: 'zh',
        callbackUrl: `http://172.27.177.63/system/api/knowledgeBase/saveFile?fileId=${route.query.fileId}`, // 后端回调地址
      },
    })
  }
</script>

<style scoped>
  .editor-container {
    width: 100vw;
    height: 100vh;
  }
</style>
